<template>
  <div>
    <proposer></proposer>
    <div class="mub"
         v-if="dialogVisible">
      <div class="tc">
        <div class="tc-top">
          <img src="@/assets/img/logo.png"
               alt="">
          <div class="tc-txt">欧陆通</div>
        </div>
        <div class="tc-bom">
          <div class="dle">是否确认删除?</div>
          <div class="sle">
            <div class="qr"
                 @click="dl">确认</div>
            <div class="qx"
                 @click="dialogVisible=false">取消</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mub1"
         v-if="dialogVisible1">
      <div class="tc">
        <div class="tc-top">
          <img src="@/assets/img/logo.png"
               alt="">
          <div class="tc-txt">欧陆通</div>
        </div>
        <div class="tc-bom">
          <div class="dle">是否确认删除?</div>
          <div class="sle">
            <div class="qr"
                 @click="dl1">确认</div>
            <div class="qx"
                 @click="dialogVisible1=false">取消</div>
          </div>
        </div>
      </div>
    </div>

    <div class="mub2"
         v-if="dialogVisible2">
      <div class="tc">
        <div class="tc-top">
          <img src="@/assets/img/logo.png"
               alt="">
          <div class="tc-txt">欧陆通</div>
        </div>
        <div class="tc-bom">
          <div class="dle">是否确认删除?</div>
          <div class="sle">
            <div class="qr"
                 @click="dl2">确认</div>
            <div class="qx"
                 @click="dialogVisible2=false">取消</div>
          </div>
        </div>
      </div>
    </div>

    <div class="mub3"
         v-if="dialogVisible3">
      <div class="tc">
        <div class="tc-top">
          <img src="@/assets/img/logo.png"
               alt="">
          <div class="tc-txt">欧陆通</div>
        </div>
        <div class="tc-bom">
          <div class="dle">是否确认删除?</div>
          <div class="sle">
            <div class="qr"
                 @click="dl3">确认</div>
            <div class="qx"
                 @click="dialogVisible3=false">取消</div>
          </div>
        </div>
      </div>
    </div>

    <div class="beijing"
         v-if="isShow">
      <el-form ref="form"
               :model="people">
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">姓名</span>
            <el-input style="flex:8"
                      v-model="people.name"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">年龄</span>
            <el-input style="flex:8"
                      v-model="people.age"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">性别</span>
            <el-input style="flex:8"
                      v-model="people.sex"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">邮箱</span>
            <el-input style="flex:8"
                      v-model="people.email"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">电话</span>
            <el-input style="flex:8"
                      v-model="people.phone"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:3">出生日期</span>
            <el-input style="flex:8"
                      v-model="people.birth"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:3">家庭住址</span>
            <el-input style="flex:8"
                      v-model="people.home"></el-input>
          </div>
        </el-form-item>
        <el-button type="primary"
                   style="width:100%"
                   @click.native="tijiao">保存</el-button>
      </el-form>
    </div>

    <div class="beijing1"
         v-if="isShow1">
      <el-form ref="form"
               :model="edufrom">
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">学校</span>
            <el-input style="flex:8"
                      v-model="edufrom.college"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">专业</span>
            <el-input style="flex:8"
                      v-model="edufrom.career"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">学历</span>
            <el-input style="flex:8"
                      v-model="edufrom.cation"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">入学时间</span>
            <el-input style="flex:8"
                      v-model="edufrom.ktime"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">毕业时间</span>
            <el-input style="flex:8"
                      v-model="edufrom.jtime"></el-input>
          </div>
        </el-form-item>
        <el-button type="primary"
                   style="width:100%"
                   @click.native="tijiao1"
                   v-if="!isXian">保存</el-button>
        <el-button type="primary"
                   style="width:100%"
                   @click.native="xianshi()"
                   v-if="isXian">保存</el-button>
      </el-form>
    </div>

    <div class="beijing2"
         v-if="isShow2">
      <el-form ref="form"
               :model="edufrom">
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">公司</span>
            <el-input style="flex:8"
                      v-model="exper.firm"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">职位</span>
            <el-input style="flex:8"
                      v-model="exper.post"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">入职时间</span>
            <el-input style="flex:8"
                      v-model="exper.ktime"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">离职时间</span>
            <el-input style="flex:8"
                      v-model="exper.jtime"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">主要职责</span>
            <el-input style="flex:8"
                      v-model="exper.gation"></el-input>
          </div>
        </el-form-item>
        <el-button type="primary"
                   style="width:100%"
                   @click.native="tijiao2"
                   v-if="!isXian1">保存</el-button>
        <el-button type="primary"
                   style="width:100%"
                   @click.native="xianshi1()"
                   v-if="isXian1">保存</el-button>
      </el-form>
    </div>

    <div class="beijing3"
         v-if="isShow3">
      <el-form ref="form"
               :model="pro">
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">项目名称</span>
            <el-input style="flex:8"
                      v-model="pro.proname"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">担任角色</span>
            <el-input style="flex:8"
                      v-model="pro.role"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">开始时间</span>
            <el-input style="flex:8"
                      v-model="pro.ktime"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">结束时间</span>
            <el-input style="flex:8"
                      v-model="pro.jtime"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%">
            <div>主要职责和业绩</div>
            <el-input v-model="pro.duty"
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"></el-input>
          </div>
        </el-form-item>
        <el-button type="primary"
                   style="width:100%"
                   @click.native="tijiao3"
                   v-if="!isXian2">保存</el-button>
        <el-button type="primary"
                   style="width:100%"
                   @click.native="xianshi2()"
                   v-if="isXian2">保存</el-button>
      </el-form>
    </div>

    <div class="beijing4"
         v-if="isShow4">
      <el-form ref="form"
               :model="tact">
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">姓名</span>
            <el-input style="flex:8"
                      v-model="tact.fname"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">电话</span>
            <el-input style="flex:8"
                      v-model="tact.fphone"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <div style="width:100%;display:flex">
            <span style="flex:2">关系</span>
            <el-input style="flex:8"
                      v-model="tact.relation"></el-input>
          </div>
        </el-form-item>
        <el-button type="primary"
                   style="width:100%"
                   @click.native="tijiao4"
                   v-if="!isXian3">保存</el-button>
        <el-button type="primary"
                   style="width:100%"
                   @click.native="xianshi3()"
                   v-if="isXian3">保存</el-button>
      </el-form>
    </div>
    <van-form>
      <div class="card">
        <div class="title">
          <div class="clr"></div>
          <p class="tit">基本信息</p>
          <div class="clear"></div>
        </div>
        <div class="apply">
          <div class="apply-h"
               v-if="!io"></div>
          <div class="names">{{people.name}}</div>
          <div v-if="io">{{people.sex}}&nbsp;&nbsp;|&nbsp;&nbsp;{{people.age}}</div>
          <div v-if="io">
            <van-icon name="envelop-o" />{{people.email}}
          </div>
          <div v-if="io">
            <van-icon name="phone-o" />{{people.phone}}
          </div>
          <div v-if="io">
            <van-icon name="friends-o" />{{people.birth}}
          </div>
          <div class="none"
               v-if="io">
            <van-icon name="wap-home-o" />{{people.home}}
          </div>
          <div class="ico"
               @click="isShow=true">
            <van-icon name="edit" />
          </div>
        </div>
      </div>

      <div class="card">
        <div class="title">
          <div class="clr"></div>
          <p class="tit">教育经历</p>
          <div class="clear"></div>
        </div>
        <div class="apply"
             v-for="(item,index) in education"
             :key="index">
          <div class="ico1"
               v-if="io1"
               @click="dialogVisible = true,getIndex(index)">
            <van-icon name="delete-o" />
          </div>
          <div>{{item.college}}</div>
          <div v-if="io1">{{item.career}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.cation}}</div>
          <div v-if="io1">{{item.ktime}}-{{item.jtime}}</div>
          <div class="ico"
               @click="isShow1=true,isXian=true,getIndex(index)">
            <van-icon name="edit" />
          </div>
        </div>
        <div class="add"
             @click="isShow1=true">
          <van-icon name="add-o" />
          <div class="div">添加 教育经历</div>
        </div>
      </div>

      <div class="card">
        <div class="title">
          <div class="clr"></div>
          <p class="tit">工作经历</p>
          <div class="clear"></div>
        </div>
        <div class="apply"
             v-for="(item,index) in experience"
             :key="index">

          <div class="ico1"
               @click="dialogVisible1=true,getIndex1(index)">
            <van-icon name="delete-o"
                      v-if="io2" />
          </div>
          <div class="ico"
               @click="isShow2=true,isXian1=true,getIndex1(index)"
               v-if="io2">
            <van-icon name="edit" />
          </div>
          <div>{{item.firm}}</div>
          <div v-if="io2">{{item.post}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.ktime}}-{{item.jtime}}</div>
          <div>{{item.gation}}</div>
        </div>
        <div class="add"
             @click="isShow2=true">
          <van-icon name="add-o" />
          <div class="div">添加 工作经历</div>
        </div>
      </div>

      <div class="card">
        <div class="title">
          <div class="clr"></div>
          <p class="tit">项目经历</p>
          <div class="clear"></div>
        </div>
        <div class="apply"
             v-for="(item,index) in project"
             :key="index">

          <div class="ico1"
               @click=" dialogVisible2=true,getIndex2(index)">
            <van-icon name="delete-o"
                      v-if="io3" />
          </div>
          <div>{{item.proname}}</div>
          <div v-if="io3">{{item.role}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.ktime}}-{{item.jtime}}</div>
          <div style="word-wrap:break-word;word-break:break-all; overflow: hidden;">{{item.duty}}</div>
          <div class="ico"
               @click="isShow3=true,isXian2=true,getIndex2(index)">
            <van-icon name="edit" />
          </div>
        </div>
        <div class="add"
             @click="isShow3=true">
          <van-icon name="add-o" />
          <div class="div">添加 项目经历</div>
        </div>
      </div>

      <div class="card">
        <div class="title">
          <div class="clr"></div>
          <p class="tit">紧急联系人</p>
          <div class="clear"></div>
        </div>
        <div class="apply"
             v-for="(item,index) in contact"
             :key="index">
          <div class="ico1"
               @click="dialogVisible3=true,getIndex3(index)">
            <van-icon name="delete-o"
                      v-if="io4" />
          </div>
          <div>{{item.fname}}</div>
          <div>{{item.fphone}}</div>
          <div>{{item.relation}}</div>
          <div class="ico"
               @click="isShow4=true,isXian3=true,getIndex3(index)">
            <van-icon name="edit"
                      v-if="io4" />
          </div>
        </div>
        <div class="add"
             @click="isShow4=true">
          <van-icon name="add-o" />
          <div class="div">添加 紧急联系人</div>
        </div>
      </div>
      <div class="tuisong">提交</div>
    </van-form>
  </div>
</template>

<script>
import proposer from '@/components/proposer'

export default {
  data () {
    return {
      // 控制删除隐藏
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      // 控制icon图标是否显示
      io: false,
      io1: false,
      io2: false,
      io3: false,
      io4: false,
      minDate: new Date(1961, 0, 1),
      maxDate: new Date(2031, 10, 1),
      currentDate: new Date(),
      showPicker: false,
      showPicker1: false,
      // 控制是保存还是修改按钮
      isXian: false,
      isXian1: false,
      isXian2: false,
      isXian3: false,
      // 控制要该下标的数据
      index: "",
      //  个人信息
      people: {
        name: "",
        age: "",
        sex: "",
        email: "",
        phone: "",
        birth: "",
        home: ""
      },
      // 教育经历表单
      edufrom: {
        college: "",
        career: "",
        cation: "",
        ktime: "",
        jtime: ""
      },
      // 工作经历表单
      exper: {
        firm: "",
        post: "",
        ktime: "",
        jtime: "",
        gation: ""
      },
      // 项目经历表单
      pro: {
        proname: "",
        role: "",
        ktime: "",
        jtime: "",
        duty: ""
      },
      // tact紧急联系人表单
      tact: {
        fname: "",
        fphone: "",
        relation: ""
      },
      // 控制蒙版层显示隐藏
      isShow: false,
      isShow1: false,
      isShow2: false,
      isShow3: false,
      isShow4: false,
      //单选框默认选中1
      radio: '1',
      // 个人基本信息
      information: {
        name: "张万里",
        sex: "男",
        age: "24",
        email: "2859142518@qq.com",
        phone: "15274987621",
        place: "北京",
        birth: "1997-12-15"
      },
      // 教育经历
      education: [],
      // 工作经历
      experience: [],
      // 项目经历
      project: [],
      // 紧急联系人
      contact: []
    }
  },
  components: {
    proposer
  },
  methods: {
    dl () {
      this.education.splice(this.index, 1)
      this.edufrom.college = ""
      this.edufrom.career = ""
      this.edufrom.cation = ""
      this.edufrom.ktime = ""
      this.edufrom.jtime = ""
      this.dialogVisible = false
    },
    dl1 () {
      this.experience.splice(this.index, 1)
      this.exper.firm = ""
      this.exper.post = ""
      this.exper.gation = ""
      this.exper.ktime = ""
      this.exper.jtime = ""
      this.dialogVisible1 = false
    },
    dl2 () {
      this.project.splice(this.index, 1)
      this.pro.firm = ""
      this.pro.post = ""
      this.pro.gation = ""
      this.pro.ktime = ""
      this.pro.jtime = ""
      this.dialogVisible2 = false
    },
    dl3 () {
      this.contact.splice(this.index, 1)
      this.tact.fname = ""
      this.tact.fphone = ""
      this.tact.relation = ""
      this.dialogVisible3 = false
    },
    getIndex (index) {
      this.edufrom.college = this.education[index].college
      this.edufrom.career = this.education[index].career
      this.edufrom.cation = this.education[index].cation
      this.edufrom.ktime = this.education[index].ktime
      this.edufrom.jtime = this.education[index].jtime
      this.index = index
    },
    getIndex1 (index) {
      this.exper.firm = this.experience[index].firm
      this.exper.post = this.experience[index].post
      this.exper.ktime = this.experience[index].ktime
      this.exper.jtime = this.experience[index].jtime
      this.exper.gation = this.experience[index].gation
      this.index = index
    },
    getIndex2 (index) {
      this.pro.proname = this.project[index].proname
      this.pro.role = this.project[index].role
      this.pro.ktime = this.project[index].ktime
      this.pro.jtime = this.project[index].jtime
      this.pro.duty = this.project[index].duty
      this.index = index
    },
    getIndex3 (index) {
      this.tact.fname = this.contact[index].fname
      this.tact.fphone = this.contact[index].fphone
      this.tact.relation = this.contact[index].relation
      this.index = index
    },
    xianshi () {
      this.isShow1 = false
      this.io1 = true
      let index = this.index
      this.education[index].college = this.edufrom.college
      this.education[index].career = this.edufrom.career
      this.education[index].cation = this.edufrom.cation
      this.education[index].ktime = this.edufrom.ktime
      this.education[index].jtime = this.edufrom.jtime
      this.edufrom.college = "";
      this.edufrom.career = ""
      this.edufrom.cation = ""
      this.edufrom.ktime = ""
      this.edufrom.jtime = ""
      this.isXian = false
    },
    xianshi1 () {
      this.isShow2 = false
      this.io2 = true
      let index = this.index
      this.experience[index].firm = this.exper.firm
      this.experience[index].post = this.exper.post
      this.experience[index].gation = this.exper.gation
      this.experience[index].ktime = this.exper.ktime
      this.experience[index].jtime = this.exper.jtime
      this.exper.firm = "";
      this.exper.post = ""
      this.exper.gation = ""
      this.exper.ktime = ""
      this.exper.jtime = ""
      this.isXian1 = false
    },
    xianshi2 () {
      this.isShow3 = false
      this.io3 = true
      let index = this.index
      this.project[index].proname = this.pro.proname
      this.project[index].role = this.pro.role
      this.project[index].duty = this.pro.duty
      this.project[index].ktime = this.pro.ktime
      this.project[index].jtime = this.pro.jtime
      this.pro.proname = ""
      this.pro.role = ""
      this.pro.duty = ""
      this.pro.ktime = ""
      this.pro.jtime = ""
      this.isXian2 = false
    },
    xianshi3 () {
      this.isShow4 = false
      this.io4 = true
      let index = this.index
      this.contact[index].fname = this.tact.fname
      this.contact[index].fphone = this.tact.fphone
      this.contact[index].relation = this.tact.relation
      this.tact.fname = ""
      this.tact.fphone = ""
      this.tact.relation = ""
      this.isXian3 = false
    },
    tijiao () {
      this.isShow = false
      this.io = true
    },
    tijiao1 () {
      this.isShow1 = false
      this.io1 = true
      let edufrom = {
        college: this.edufrom.college,
        career: this.edufrom.career,
        cation: this.edufrom.cation,
        ktime: this.edufrom.ktime,
        jtime: this.edufrom.jtime
      }
      this.education.push(edufrom)
      this.edufrom.college = ""
      this.edufrom.career = ""
      this.edufrom.cation = ""
      this.edufrom.ktime = ""
      this.edufrom.jtime = ""
    },
    tijiao2 () {
      this.isShow2 = false
      this.io2 = true
      let exper = {
        firm: this.exper.firm,
        post: this.exper.post,
        gation: this.exper.gation,
        ktime: this.exper.ktime,
        jtime: this.exper.jtime
      }
      this.experience.push(exper)
      this.exper.firm = ""
      this.exper.post = ""
      this.exper.gation = ""
      this.exper.ktime = ""
      this.exper.jtime = ""
    },
    tijiao3 () {
      this.isShow3 = false
      this.io3 = true
      let pro = {
        proname: this.pro.proname,
        role: this.pro.role,
        duty: this.pro.duty,
        ktime: this.pro.ktime,
        jtime: this.pro.jtime
      }
      this.project.push(pro)
      this.pro.proname = ""
      this.pro.role = ""
      this.pro.duty = ""
      this.pro.ktime = ""
      this.pro.jtime = ""
    },
    tijiao4 () {
      this.isShow4 = false
      this.io4 = true
      let tact = {
        fname: this.tact.fname,
        fphone: this.tact.fphone,
        relation: this.tact.relation,
      }
      this.contact.push(tact)
      this.tact.fname = ""
      this.tact.fphone = ""
      this.tact.relation = ""
    },
    onConfirm (time) {
      let date = new Date(time);
      let date_value = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      this.edufrom.ktime = date_value
      this.showPicker = false;
    },
    onConfirm1 (time) {
      let date = new Date(time);
      let date_value = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      this.edufrom.jtime = date_value
      this.showPicker1 = false;
    },
  },
}
</script>
<style scoped>
.zhidi {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.mub,
.mub1,
.mub2,
.mub3 {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 30;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}
.tc-txt {
  font-size: 40px;
  font-weight: bold;
  margin-left: 20px;
}
.tc {
  position: absolute;
  top: 30%;
  left: 5%;
  right: 5%;
  overflow: auto;
  border-radius: 5px;
}
.sle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.qr,
.qx {
  height: 25px;
  width: 150px;
  border: 1px solid #666666;
  text-align: center;
  line-height: 25px;
  border-radius: 3px;
  font-size: 14px;
  color: #666666;
}
.qx {
  margin-left: 15px;
}
.dle {
  font-size: 22px;
  color: #898989;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.tc-top {
  height: 100px;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tc-bom {
  height: 115px;
  background: #ffffff;
}
/* handleClose */
.apply-h {
  height: 30px;
}
.beijing,
.beijing1,
.beijing2,
.beijing3,
.beijing4 {
  overflow: auto;
  position: fixed;
  z-index: 11;
  background-color: rgba(255, 255, 255);
  padding: 25px 10px 25px 10px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 1px solid #ccc;
  background-color: white;
}
.zhezhao1 {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 30;
  overflow: auto;
  background-color: #fff;
}
.add {
  display: flex;
  height: 50px;
  justify-content: center;
  align-items: center;
}
.add .div {
  margin-left: 5px;
  font-size: 14px;
}
.van-icon-add-o {
  font-size: 25px;
  color: #00b0ff;
}
.apply .names {
  margin-bottom: 5px;
}
/deep/.van-radio__icon--round .van-icon {
  font-size: 13px;
}
p {
  margin: 0;
}
.tit {
  font-size: 14px;
  float: left;
  margin-left: 7px;
}
.clr {
  height: 15px;
  width: 7px;
  background: #9e1121;
  float: left;
  margin-top: 3px;
  margin-left: 4px;
}
.clear {
  clear: both;
}
.body {
  margin: 15px 0;
  display: flex;
  justify-content: center;
}
.card {
  padding: 15px 0 1px;
  border-bottom: 1px solid #efefef;
}
/deep/.van-radio__label {
  font-size: 13px;
}
.van-icon-success {
  font-size: 12px;
}
.apply .ico {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: #dcdcdc;
  text-align: center;
  position: absolute;
  right: 20px;
  top: 0px;
  margin: 0;
}
.apply .ico1 {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: #dcdcdc;
  text-align: center;
  position: absolute;
  right: 45px;
  top: 0px;
  margin: 0;
}
.apply {
  position: relative;
  padding: 0 20px;
  font-size: 14px;
  margin-bottom: 15px;
}
.apply .none {
  margin-bottom: 0px;
}
.apply div {
  margin: 5px 0 10px;
}
/deep/.van-icon-edit {
  font-size: 14px;
}
.van-icon-envelop-o,
.van-icon-phone-o,
.van-icon-friends-o,
.van-icon-wap-home-o {
  margin-right: 10px;
  font-size: 16px;
}
.tuisong {
  height: 50px;
  width: 100%;
  line-height: 50px;
  color: #ffffff;
  text-align: center;
  background: #9e1121;
}
/deep/.el-input__inner {
  border: none;
  padding: 0;
}
/deep/.el-input.is-disabled .el-input__inner {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #cbc8c8;
}
/deep/.el-form-item__content {
  border-bottom: 1px solid #dcdfe6;
}
</style>